<template>
  <a-modal class="cyfs-track-dialog" v-model="trackVisible" width="650px">
    <div class="track-data-header">
      <div class="header-content" style="display: flex;align-items: center">
        <img class="track-data-header-img" :src="trackObject.headImgUrl"/>
        <div class="track-data-header-nickname">{{ trackObject.nickname }}</div>
      </div>
      <div class="header-content">推广追踪</div>
    </div>
    <div style="height: 500px;overflow-y: scroll;overflow-x: hidden">
      <a-row class="mt-3" :gutter="20">
        <a-col :md="12">
          <track-histogram-fission ref="trackHistogramFission"/>
        </a-col>
        <a-col :md="12">
          <a-table
            rowKey="level"
            class="mt-10 fill"
            :pagination="false"
            :columns="columns"
            :data-source="shareLevel">
            <span slot="rank" slot-scope="text, record">
              {{ record.rank+'%' }}
            </span>
          </a-table>
        </a-col>
      </a-row>
      <div class="cyfs-tarck-list">
        <div v-for="(item,index) in trackList" :key="index" class="cyfs-tarck-list-content">
          <div style="display:flex;width: 50%;align-items: center">
            <img class="track-data-header-img" :src="item.headImgUrl"/>
            <div class="track-data-header-nickname" style="color: #232735;font-size: 16px">{{ item.nickname
            }}
            </div>
          </div>
          <div style="width: 50%" class="d-aic">
            <div style="text-align: right;color: #232735;font-size: 14px">{{ getFollowState(item.following)
            }}
            </div>
            <div style="text-align: right;color: #909298;font-size: 12px">{{ item.followTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
    import TrackHistogramFission from './track-histogram-fission'
    import API from '../../../../api/mp/gameData'

    export default {
        name: 'CyfsTrackDialog',
        components: { TrackHistogramFission },
        data () {
            return {
                trackObject: {},
                trackVisible: false,
                trackList: [],
                shareLevel: [],
                columns: [
                    {
                        title: '层级',
                        dataIndex: 'level'
                    },
                    {
                        title: '粉丝数',
                        dataIndex: 'count'
                    },
                    {
                        title: '占比',
                        dataIndex: 'rank',
                        scopedSlots: { customRender: 'rank' }
                    }
                ]
            }
        },
        methods: {
            open (row, gameId, gzhUserId) {
                this.trackVisible = true
                this.trackObject = Object.assign({}, row)
                API.pageTrack(gzhUserId, gameId, row.openId, { current: 0, size: 1000 }).then(res => {
                    this.trackList = res.shareList.records
                    this.formatLevel(res.shareLevel)
                    this.$refs.trackHistogramFission.init(res.shareLevel)
                })
            },
            formatLevel (shareLevel) {
                if (!shareLevel.length) {
                    return
                }
                let total = 0
                shareLevel.forEach(item => {
                    total += item.count
                })

                shareLevel.forEach(item => {
                    item.rank = this.$Utils.keepN(item.count / total) * 100
                })
                this.shareLevel = shareLevel
            },
            hide () {
                this.trackList = []
                this.trackVisible = false
                this.$refs.trackHistogramFission.hide()
            },
            getFollowState (follow) {
                if (follow === 1) {
                    return '助力成功'
                } else if (follow === 2) {
                    return '已取关，助力失效'
                } else {
                    return '未关注'
                }
            }
        }
    }
</script>

<style lang="less">
    .cyfs-track-dialog {
        .track-data-header {
            display: flex;
            padding: 16px 24px;
            height: auto;
            align-items: center;
            color: rgba(0, 0, 0, .65);
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            border-radius: 4px 4px 0 0;
        }

        .header-content {
            width: 50%;
            height: 100%;
        }

        .track-data-header-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .track-data-header-nickname {
            margin-left: 10px;
        }

        .cyfs-tarck-list {
            display: flex;
            flex-wrap: wrap;

            .cyfs-tarck-list-content {
                display: flex;
                width: 50%;
                padding: 20px 60px 10px 0;
            }
        }
    }
</style>
